<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h1>字符反转:{{reverseMsg}}</h1>
    <input type="text" v-model="msg" @change="reverse()">
</div>

<div id="app1">
    <h1>过滤器，转大写字母:{{msg | toUpper}}</h1>
    <input type="text" v-model="msg">
</div>

<div id="app2">
    <h1>随机数: {{num}}</h1>
    <div v-if="num>0.5">大于0.5</div>
    <div v-else-if="num == 0.5">等于0.5</div>
    <div v-else>小于0.5</div>
</div>

<div id="app3">
    <h1>v-for循环</h1>
    <ul>
        <li v-for="(value,key,index) in obj">
            {{index}}--{{key}}--{{value}}
        </li>
    </ul>
</div>

<div id="app4">
    <h1>watch监听，num：{{num}}</h1>
    <button @click="num++">click</button>
</div>

<div id="app5">
    <h1>事件修饰符</h1>
    <button @click.once="alert(1111)">只触发一次click事件</button>
    <br>
    <input @keyup.enter="alert('键盘enter事件111')" type="text" placeholder="键盘enter事件">
    <br>
    <input @keyup.space="alert('键盘space事件111')" type="text" placeholder="键盘space事件">
</div>

<div id="app6">
    <h1>复选框:{{checkedNames}}</h1>
    <input type="checkbox" id="zhangsan" value="zhangsan" v-model="checkedNames">
    <label for="zhangsan">zhangsan</label>
    <input type="checkbox" id="lisi" value="lisi" v-model="checkedNames">
    <label for="lisi">lisi</label>
    <input type="checkbox" id="wangwu" value="wangwu" v-model="checkedNames">
    <label for="wangwu">wangwu</label>
</div>

<div id="app7">
    <h1>select下拉框:{{selectedSku}}</h1>
    <select name="sku" v-model="selectedSku">
        <option value="">选择sku</option>
        <option value="book">book</option>
        <option value="phone">phone</option>
        <option value="apple">apple</option>
    </select>
</div>

<div id="app8">
    <h1>修饰符</h1>
    <p>.lazy可以使input转为change事件：{{msg}}</p>
    <input type="text" v-model.lazy="msg">
    <p>.trim可以自动过滤用户输入的首尾空格：{{msg1}}</p>
    <input type="text" v-model.trim="msg1">
    <p>.number将用户输入值转化为Number类型：{{num}}</p>
    <input type="number" v-model.number="num">
</div>

<div id="app9">
    <h1>子定义组件</h1>
    <runoob></runoob>
</div>

<div id="app10">
    <h1>子定义指令，自动获取焦点</h1>
    <input type="text" v-focus>
</div>

<div id="app11">
    <h1>路由</h1>
    <p>使用router-link来设置导航，使用to来指定链接；router-link默认会渲染成一个a标签</p>
    <router-link to="/user">用户管理</router-link>
    <router-link to="/sku" event="mouseover">商品管理</router-link>
    <p>router-view，路由匹配到的组件将会渲染到这里</p>
    <router-view></router-view>
</div>

<div id="app12">
    <h1>axios http请求</h1>
    <ul v-for="site in sites">
        <li>{{site}}</li>
    </ul>
</div>

<script src="../js/index.js"></script>
</body>
</html>